<template>
  <div class="afterInvest-page app-container">
    <el-form ref="dataForm" :inline="true" label-width="80px" :model="dataForm">
      <el-form-item label="投资分组" prop="groupName">
        <el-input v-model="dataForm.groupName" clearable placeholder="请输入投资分组" style="width: 260px;"></el-input>
      </el-form-item>
      <el-form-item label="投资名称" prop="investName">
        <el-input v-model="dataForm.investName" clearable placeholder="请输入投资名称" style="width: 260px;"></el-input>
      </el-form-item>
      <el-form-item style="margin-left: 20px">
        <el-button class="bg-green" @click="getList">查询</el-button>
        <el-button type="danger" @click="addOrUpdateHandle()">添加</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <p v-if="list[0]&&list[0].investIncomeTotalVo" class="tip">
      总投资金额：<span>{{list[0].investIncomeTotalVo.investMoneyTotal}}</span> 万元
      <span style="padding-left: 40px;">
      </span> 总收益：<span :class="list[0].investIncomeTotalVo.investIncomeTotal>=0?'positiveFc':'negativeFc'">{{list[0].investIncomeTotalVo.investIncomeTotal}}</span> 元
      <span style="padding-left: 40px;">
      </span> 总收益率：<span  :class="list[0].investIncomeTotalVo.investIncomeRateTotal>=0?'positiveFc':'negativeFc'">{{list[0].investIncomeTotalVo.investIncomeRateTotal}}%</span>
    </p>
    <el-table
      ref="multipleTable"
      :data="list"
      border fit
      size="mini"
      :header-cell-style="{background:'#dcedff',color:'#32639d'}"
      style="width: 100%;">
      <el-table-column type="index" label="序号" align="center" width="60" fixed></el-table-column>
      <el-table-column prop="groupName" label="投资分组" min-width="100" fixed show-overflow-tooltip></el-table-column>
      <el-table-column prop="investName" label="投资名称" min-width="140" fixed show-overflow-tooltip>
        <template slot-scope="{row}">
          <span v-if="row.hasNetWorthStatus" style="color: rgb(79, 149, 221);cursor: pointer;" @click="detailsHandle(row.investId, row.viewStatus )">{{ row&&row.investName }}</span>
          <span v-else style="color: #999;cursor: pointer;" @click="$message('该投资或子投资下无净值')">{{ row&&row.investName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="investTypeText" label="投资形式" align="center" min-width="80"></el-table-column>
      <el-table-column prop="latestNetWorth" label="单位净值" align="center" min-width="90"></el-table-column>
      <el-table-column prop="initShare" label="持仓份额" align="center" min-width="105" show-overflow-tooltip></el-table-column>
      <el-table-column prop="investMoney" label="投资金额(万元)" align="center" min-width="100"></el-table-column>
      <el-table-column prop="investIncom" label="收益(元)" align="center" min-width="90">
        <template slot-scope="scope">
          <span v-if="scope.row.investIncom || scope.row.investIncom==0" :class="rmoney(scope.row.investIncom)>=0?'positiveFc':'negativeFc'">{{ scope.row.investIncom }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="investIncomeRate" label="收益率" align="center" min-width="90">
        <template slot-scope="scope">
          <span v-if="scope.row.investIncomeRate || scope.row.investIncomeRate==0" :class="scope.row.investIncomeRate>=0?'positiveFc':'negativeFc'">{{ scope.row.investIncomeRate }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="todayIncomRate" label="日收益率" align="center" min-width="90">
        <template slot-scope="scope">
          <span v-if="scope.row.todayIncomRate || scope.row.todayIncomRate==0" :class="scope.row.todayIncomRate>=0?'positiveFc':'negativeFc'">{{ scope.row.todayIncomRate }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="investIncomeRate" label="近1月收益率" align="center" min-width="90">
        <template slot-scope="{row}">
          <span v-if="row.investNetWorthExtends&&row.investNetWorthExtends[1]&&row.investNetWorthExtends[1].incomeRate || row.investNetWorthExtends&&row.investNetWorthExtends[1]&&row.investNetWorthExtends[1].incomeRate==0" 
          :class="row.investNetWorthExtends[1].incomeRate>=0?'positiveFc':'negativeFc'">{{ row.investNetWorthExtends[1].incomeRate }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="investIncomeRate" label="近6月收益率" align="center" min-width="90">
        <template slot-scope="{row}">
          <span v-if="row.investNetWorthExtends&&row.investNetWorthExtends[3]&&row.investNetWorthExtends[3].incomeRate || row.investNetWorthExtends&&row.investNetWorthExtends[3]&&row.investNetWorthExtends[3].incomeRate==0" 
          :class="row.investNetWorthExtends[3].incomeRate>=0?'positiveFc':'negativeFc'">{{ row.investNetWorthExtends[3].incomeRate }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="investIncomeRate" label="近1年收益率" align="center" min-width="90">
        <template slot-scope="{row}">
          <span v-if="row.investNetWorthExtends&&row.investNetWorthExtends[4]&&row.investNetWorthExtends[4].incomeRate || row.investNetWorthExtends&&row.investNetWorthExtends[4]&&row.investNetWorthExtends[4].incomeRate==0"
          :class="row.investNetWorthExtends[4].incomeRate>=0?'positiveFc':'negativeFc'">{{ row.investNetWorthExtends[4].incomeRate }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="createdby" label="创建人" min-width="100" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="latestNetWorthTime" label="净值日期" align="center" min-width="90">
        <template slot-scope="{row}">
          <span>{{row.latestNetWorthTime | parseTime}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="investTime" label="投资时间" align="center" min-width="90">
        <template slot-scope="{row}">
          <span>{{row.investTime | parseTime}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="280" align="center">
        <template slot-scope="{row}">
          <el-button class="filter-item" size="mini" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="addOrUpdateHandle(row.investId)">编辑 </el-button>
          <el-button class="filter-item" size="mini" style="margin-left: 10px;" type="primary" icon="el-icon-sort" @click="relationHandle(row)">子投资</el-button>
          <el-button class="filter-item" size="mini" style="margin-left: 10px;" type="primary" icon="el-icon-edit-outline" @click="enternetValueHandle(row)">录入净值</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageCurrent" :limit.sync="listQuery.limit" @pagination="getList" />

    <enternetValueOpen ref="enternetValueOpen" v-if="hasEnternetValueOpen" @closeOpen="getList"></enternetValueOpen>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { findAllManageByPage } from '@/api/afterInvest'
import { rmoney } from '@/utils'
import Pagination from '@/components/Pagination'
import enternetValueOpen from './relation/enternetValueOpen.vue'

export default {
  name: 'AfterInvest',
  components: { Pagination, enternetValueOpen },
  data() {
    return {
      dataForm: {},
      total: 0,
      listQuery: {
        pageCurrent: 1,
        limit: 20
      },
      relationOpneVisible: false,
      addOrUpdateVisible: false,
      list: [],

      hasEnternetValueOpen: false,
      rmoney: Function
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  watch: {
    '$route.query.refresh': {
      handler() {
        this.getList()
      }
    }
  },
  created() {
    if(this.$route.query.groupId) {
      this.dataForm.groupId = this.$route.query.groupId
      this.dataForm.groupName = this.$route.query.groupName
    }
    this.getList()
    this.rmoney = rmoney
  },
  methods: {
    enternetValueHandle(row) {
      if(row.investAccount) {
        this.$message({
          type: 'warning',
          message: '该策略已自动同步，无需手动录入'
        })
      }else if(!row.enableNetWorth) {
        this.$message({
          type: 'warning',
          message: '有子投资存在，请在子投资中录入净值'
        })
      }else {
        this.hasEnternetValueOpen = true
        this.$nextTick(() => {
          this.$refs.enternetValueOpen.init(row.strategyId, row.id, row.investId)
        })
      }
    },
    addOrUpdateHandle(id) {
      if(id) {
        this.$router.push({
          path: '/afterManage/afterInvest/update',
          query: {
            id,
            groupId: this.$route.query.groupId,
            groupName: this.$route.query.groupName,
          }
        })
      }else {
        this.$router.push({
          path: '/afterManage/afterInvest/add',
          query: {
            id,
            groupId: this.$route.query.groupId,
            groupName: this.$route.query.groupName,
          }
        })
      }
    },
    relationHandle(row) {
      this.$router.push({
        path: '/afterManage/afterInvest/relation',
        query: {
          id: row.investId,
          investAccount: row.investAccount, //子账号
          investAdviser: row.investAdviser, //投顾
          investIndex: row.investIndex, //对标指数
        }
      })
    },
    detailsHandle(id, status) {
      this.$router.push({
        path: '/afterManage/afterInvest/detailsPage',
        query: {
          id, 
          status
        }
      })
    },
    resetForm() {
      // history.pushState('a', null, '/') // 重置url?后搜索条件
      this.$refs.dataForm.resetFields()
      this.dataForm = {}
      this.$router.push('/afterManage/afterInvest')
      this.getList()
    },
    getList() {
      findAllManageByPage({
        userId: this.userId,
        ...this.dataForm,
        ...this.listQuery
      }).then(res => {
        this.list = res.body.list
        this.total = res.body.total
        this.$nextTick(() => {
          this.$refs.multipleTable.doLayout()
        })
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.afterInvest-page {
  .tip {
    padding-bottom: 6px;
    text-align: right;
  }
  .el-icon-arrow-down {
    border: 1px solid rgb(79, 149, 221);
    padding: 1px 0;
    cursor: pointer;
    margin-right: 4px;
    color: rgb(79, 149, 221);
  }
  // ::v-deep .el-icon-sort {
  //   transform: rotate(90deg);
  // }
}
</style>>
